<!-- banner -->
<div class="relative my-2 overflow-hidden rounded-xl lg:mx-[2%] max-lg:px-0">
  <ul
    id="banner-box"
    class="flex items-center"
  >
    <slot />
  </ul>
</div>
<script>
  import { initBannerSlider } from '@/utils/banner.js';
  initBannerSlider('banner-box');
</script>
<style>
  #banner-box {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    touch-action: pan-y;
    will-change: transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  #banner-box.dragging {
    transition: none;
    cursor: grabbing;
  }
  #banner-box::-webkit-scrollbar {
    display: none;
  }
  #banner-box li {
    list-style-type: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>

